import { Input, Button } from "antd"
import { SendOutlined } from "@ant-design/icons"
import useChat from '@/store/chat'
import { useState } from "react"
export type ChatInputProps = {
  clickSend?: (content: string) => void
}
function ChatInput(props: ChatInputProps) {
  const { sendMessage, clearMessages } = useChat()
  const [loading, setLoading] = useState(false)
  const [content, setContent] = useState('')
  let onClickSend = () => {
    if (loading) {
      setLoading(false);
      return
    }
    if (props.clickSend) {
      props.clickSend(content);
    } else {
      sendMessage(content);
      setContent('');
    }
    setLoading(false)
  }

  return (
    <div>ChatInput
      <Input.TextArea name="content" allowClear={true} disabled={false}
        value={content}
        onChange={(e) => { setContent(e.target.value) }}
        onKeyDown={(e) => {
          if (e.code === 'Enter') {
            e.preventDefault()
            onClickSend()
          }
        }}
      />
      <Button type="primary" icon={<SendOutlined />}
        onClick={onClickSend}>
        发送
      </Button>
      <Button type="primary" onClick={() => { clearMessages(); setContent("") }}>清空</Button>
    </div>
  )
}
export default ChatInput
